<template>
  <el-card>
    <div v-show="sences == 0">
      <el-table
        :data="skuDataList"
        :stripe="true"
        style="margin: 20px 0"
        tooltip-effect="dark"
      >
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="80px"
        />
        <el-table-column
          label="名称"
          prop="skuName"
          width="150px"
          show-overflow-tooltip
        />
        <el-table-column
          label="描述"
          prop="skuDesc"
          width="150px"
          show-overflow-tooltip
        />
        <el-table-column label="默认图片" width="150px">
          <template #default="{ row }">
            <el-image
              :src="row.skuDefaultImg"
              fit="fill"
              :lazy="true"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="重量(克)" prop="weight" width="150px" />
        <el-table-column label="价格(元)" prop="price" width="150px" />
        <el-table-column label="操作" fixed="right" width="260" align="center">
          <template #default="{ row }">
            <el-switch
              :model-value="row.isSale == 1 ? true : false"
              size="large"
              inline-prompt
              active-text="已上架"
              inactive-text="己下架"
              style="margin-right: 15px"
              :loading="row.load"
              @change="upDown(row)"
              v-has="`btn.Sku.updown`"
            />
            <el-button
              type="primary"
              size="small"
              @click="upDateSku(row)"
              icon="Edit"
              v-has="`btn.Sku.update`"
            ></el-button>
            <el-button
              type="info"
              size="small"
              @click="getSkuMessage(row)"
              v-has="`btn.Sku.detail`"
              icon="InfoFilled"
            ></el-button>
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="InfoFilled"
              title="确认删除这一项么?"
              @confirm="DeleteSkubyId(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  v-has="`btn.Sku.remove`"
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        v-model:currentPage="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, ->,jumper,total"
        :total="total"
        size="small"
        background
        :pager-count="7"
      ></el-pagination>
      <!-- 侧边栏抽屉 -->
      <el-drawer
        :model-value="drawer"
        title="查看商品详情"
        direction="rtl"
        destroy-on-close
        @closed="drawer = false"
        size="40%"
      >
        <el-row style="margin: 20px 0">
          <el-col :span="4" :offset="1">名称</el-col>
          <el-col :span="18">
            {{ infoSku.skuName ? infoSku.skuName : '暂无信息' }}
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="4" :offset="1">描述</el-col>
          <el-col :span="18">
            {{ infoSku.skuDesc ? infoSku.skuDesc : '暂无信息' }}
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="4" :offset="1">价格</el-col>
          <el-col :span="18">
            {{ infoSku.price ? infoSku.price : '暂无信息' }}
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="5">平台属性</el-col>
          <el-col :span="18">
            <el-tag
              type="warning"
              size="normal"
              effect="plain"
              style="margin: 5px"
              v-for="item in infoSku.skuAttrValueList"
              :key="item.attrId"
            >
              {{ item.attrName }}-{{
                item.valueName ? item.valueName : '暂无信息'
              }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="5">
            {{
              infoSku.skuSaleAttrValueList.length > 0
                ? '销售属性'
                : '销售属性:暂无信息'
            }}
          </el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px"
              type="success"
              effect="plain"
              v-for="item2 in infoSku.skuSaleAttrValueList"
              :key="item2.id"
            >
              {{ item2.saleAttrName }}-{{ item2.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="6">商品预览图</el-col>
          <el-col :span="24" v-if="infoSku.skuImageList.length == 0">
            <div class="imgsolt">
              <el-image>
                <template #error>
                  <el-icon><Picture /></el-icon>
                </template>
              </el-image>
              <span style="font-size: 15px">敬请期待...</span>
            </div>
          </el-col>
          <el-col v-else>
            <el-carousel
              pause-on-hover="false"
              :interval="3000"
              type="card"
              trigger="click"
              class="sku"
            >
              <el-carousel-item
                v-for="item in infoSku.skuImageList"
                :key="item.id"
              >
                <div class="block">
                  <el-image
                    :src="item.imgUrl"
                    style="width: 100%"
                    justify="center"
                  ></el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </div>
    <skuForm ref="skuUp" v-show="sences == 1" @sen="changeSences"></skuForm>
  </el-card>
</template>

<script lang="ts" setup name="index">
import { onMounted, ref } from 'vue'
import {
  reqGetSkuLimit,
  reqReOrFa,
  reqCanCel,
  reqSkuInfo,
  reqDeleteSku,
} from '@/api/product/sku'
import { SkuRecords, getNewSku, getSku } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'
import skuForm from '../spu/skuForm.vue'
let currentPage = ref(1)
let pageSize = ref(5)
let total = ref(20)
let skuDataList = ref<SkuRecords[]>()
let skuUp = ref()
let sences = ref(0)
let drawer = ref(false)
let infoSku = ref<getNewSku>({
  category3Id: '',
  spuId: '',
  tmId: '',
  skuName: '',
  price: '',
  weight: '',
  skuDefaultImg: '',
  skuDesc: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuImageList: [],
})
// 页面加载时请求数据
onMounted(() => {
  getSkuData()
})
//封装一个方法用于请求数据
const getSkuData = async () => {
  let result = await reqGetSkuLimit(currentPage.value, pageSize.value)
  if (result.code == 200) {
    total.value = result.data.total
    skuDataList.value = result.data.records
  }
}
//每页多少条发生改变时重新请求数据，因为是v-bind所以重新赋值
const sizeChange = (val: number) => {
  pageSize.value = val
  getSkuData()
}
//页码发生改变时重新请求数据，因为是v-model所以不用重新赋值
const currentChange = () => {
  getSkuData()
}
//上架和下架
const upDown = async (row: SkuRecords) => {
  row.load = true
  //如果销售状态为1当前状态为上架，执行操作下架
  if (row.isSale != 1) {
    const result = await reqReOrFa(row.id)
    if (result.code == 200) {
      ElMessage({ type: 'success', message: '上架成功' })
      row.load = false
    }
  } else {
    //如果销售状态为1当前状态为上架，反之就是上架
    const result = await reqCanCel(row.id)
    if (result.code == 200) {
      ElMessage({ type: 'success', message: '下架成功' })
      row.load = false
    }
  }
  getSkuData()
}
//切换为修改页面修改数据暂未开放
const upDateSku = (row: getSku) => {
  skuUp.value.initUpdate(row)
  sences.value = 1
}
// 从修改切换场景
const changeSences = (obj: any) => {
  sences.value = obj.flag
}
//获取sku详细信息抽屉
const getSkuMessage = async (row: getSku) => {
  // 抽屉出来
  drawer.value = true
  // 获取数据
  const result = await reqSkuInfo(row.id as number)
  if (result.code == 200) {
    infoSku.value = result.data
  }
}
//删除sku
const DeleteSkubyId = async (row: getSku) => {
  //删除数据
  await reqDeleteSku(row.id as number)
    .then((result) => {
      if (result.code == 200) {
        //成功后回到第一页
        currentPage.value = 1
        //请求数据根据页码
        getSkuData()
        ElMessage({ type: 'success', message: '删除成功' })
      } else ElMessage({ type: 'error', message: '系统数据' + result.code })
    })
    .catch((error) => ElMessage({ type: 'error', message: '删除失败' + error }))
}
</script>
<style scoped lang="scss">
.el-carousel__item {
  color: #ecfda0;
  align-items: center;
  margin: 0;
  text-align: center;
}
.el-carousel {
  height: 90%;
  width: 90%;
  margin: 0 auto;
}
::v-deep .sku .el-carousel__button {
  background-color: rgb(225, 225, 225) !important;
}
::v-deep .sku ul {
  display: flex;
}
.imgsolt {
  width: 100%;
  color: rgb(218, 218, 218);
  height: 150px;
  display: flex;
  border: 1px solid rgb(218, 218, 218);
  justify-content: center;
  font-size: 50px;
  align-items: center;
}
</style>
